<template>
  <f7-page>
    <qm-currentcy-navbar title="我的服务"> </qm-currentcy-navbar>
    <div class="my-body">
      <div class="title">您当前已加入以下系统:</div>
      <div class="neirong">
        <div v-for="(item, index) in list" :key="index" @click="openMiniApp(item)">
          <f7-card no-shadow  style="margin-bottom: 20px;background: #ffffffad linear-gradient(to top, rgba(0,255,0,0), #007aff14);;" v-if="item.type !== 'server'">
            <f7-card-header
              :class="[
                homepage === item.serverCode
                  ? 'homepagetitletrue'
                  : 'homepagetitle',
              ]"
            >
              {{ item.serverName }}
            </f7-card-header>
            <f7-card-footer>
              <div>{{ item.parentName }}</div>
              <f7-button
                fill
                round
                v-if="homepage === item.serverCode"
                class="homepagebuttontrue"
                >主页</f7-button
              >
              <f7-button
                outline
                round
                v-else
                class="homepagebutton"
                @click.stop="sethomepage(item.serverCode, item.serverId)"
                >设为主页</f7-button
              >
            </f7-card-footer>
          </f7-card>
        </div>
      </div>
      <div class="footer">
        <f7-link href="/ui/panel/index2"
          >全部系统
          <f7-icon f7="arrow_right" color="#5993f7" size="20px"></f7-icon
        ></f7-link>
      </div>
    </div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      homepage: this.$framework.account.getminiapphomepage().serverCode,
      getUrl:
        "/api/app/mobileServer/getServerOptions",
      setUrl:
        "/api/app/mobileServer/setMasterWindow",
      appId: this.$f7.data.currentUser.userId,
      userCode: {
        userId: this.$f7.data.currentUser.userId,
        appCode: this.$f7.id || window.qmplus.runtime.appid,
        serverId:  '',
      },
      list: this.$framework.account.getuserlist(),
      tips2:vue.$f7.toast.create({
            icon: `<i class="f7-icons">rays</i>`,
            text: '主页切换中....',
            position: "center",
            cssClass: "qm-toast",
            closeTimeout: 10000,
      })
    };
  },
  methods: {
    // 点击跳转系统
      openMiniApp(key) {
      // 跳转页面时，侧边栏的当前系统文字也需要改变
      this.$framework.account.changepanelinformation(key)
      if (key.serverUrl.indexOf("http") === -1) {
        this.$f7.views.current.router.navigate(key.serverUrl);
      } else {
        this.$framework.miniApp.open({
            appCode: key.serverId,
            appName: key.serverName,
            appLink: this.getAppLink(key),
            preloading: key.preloading == 1,
            isLogin: key.isLogin == 1,
            cssText: key.cssText || "",
            listenResourceJs: ``,
            backJS: key.backJs || "",
            isTitleBar: key.isTitleBar == 1,
            publicKey: ``,
            privateKey: ``,
          }, null, "white");
        }
    },
    // 设置主页
    sethomepage(index, serverid) {
      this.userCode.serverId = serverid;
      this.tips2.open();
      this.$f7.request.post(this.setUrl, this.userCode, (r) => {
        r = JSON.parse(r);
        if (r && r.success) {
          this.homepage = index;
          this.tips2.close()
        } else {
        this.$f7.dialog.confirm(r.message)
        }
        // 选择后需要重新调用接口获取新的页面数据
        this.$framework.account.getmobileServers()
      });
    },
    getAppLink(key) {
      let url = key.serverUrl;
      if (key.parmas) {
        let d1 = url.indexOf("?"),
          d2 = url.indexOf("#");
        if (d1 == -1 || d2 > d1) {
          url += "?";
        }
        let pa = JSON.parse(this.data.parmas || {});
        Object.keys(pa).forEach((key) => {
          url += `&${key}=${encodeURIComponent(this.parmas[key] || pa[key])}`;
        });
      }
      return url;
    },
  },
  destroyed(){
    // 离开页面时关闭通知
    this.tips2.close()
  }
};
</script>

<style lang="less" scoped>
/deep/ .page-content {
  padding: 0px;
  padding-top: 44px;
}
.my-body {
  background: url("../../../../static/img/terminal/backgroundimg.jpeg") no-repeat;
  margin: 0px;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 100%;
  padding: 0px 10px 0px;
  /deep/ .card-footer:before {
    width: 0;
  }
  /deep/ .card-header:after {
    width: 0;
  }

  .title {
    color: #212121;
    font-size: var(--font-size-weak);
    position: sticky;
    top: 0;
    z-index: 999;
    overflow: hidden;
    height: 35px;
    padding-top: 10px;
  }
  .neirong {
    height: auto;
    max-height: 590px;
    overflow: auto;
  }
  .homepagetitle {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .homepagetitletrue {
    font-size: 18px;
    font-weight: 600;
    color: #3385ff;
    margin-bottom: 15px;
    padding-top: 10px;
  }
  .homepagebutton {
    width: 77px;
    height: 27px;
    line-height: 25px;
   --f7-button-border-color: #00000026;
    color: #0000006e;
  }
    .homepagebuttontrue {
    width: 77px;
    height: 27px;
    line-height: 25px;
    color: #ffff;
  }
  .footer {
    position: sticky;
    bottom: 0;
    height: 65px;
    color: #5993f7;
    text-align: center;
    line-height: 65px;
  }
}
</style>
